import React, {useState} from 'react'
import {Button, Input, Form, Radio, Toast, Loading} from 'react-vant'
import PrivacyPolicy from "../PrivacyPolicy";
import {getHomeworkList} from "../../api";
import {useNavigate} from "react-router-dom";

interface Course {
  // 课程名
  "CourseName": string
  // 作业名
  "HWName": string;
  // 结束日期
  "EndDate": string;
  // 已提交
  "IsSubmit": string;
  // 逾期
  "OverDue": string;
}

interface Props {
  setWaterMark: (p: { content: string }) => void;
  setJobs: (t: Array<Course>) => void;
  setLogined: (l: boolean) => void;
}

interface T {
  loginname: string;
  password: string;
  remember: number | undefined;
}

const Login: React.FC<Props> = (props) => {
  const {setWaterMark, setJobs, setLogined} = props;

  const [form] = Form.useForm()

  const navigate = useNavigate();

  const [loading, setLoading] = useState(false);

  const onFinish = (values: T) => {
    const {remember} = values;
    if (remember) {
      localStorage.setItem('loginname', values.loginname);
      localStorage.setItem('password', values.password);
      values.remember && localStorage.setItem('remember', String(values.remember));
    }

    getHomeworkList(values)
      .then(response => {
        const {data: {code, data, msg}} = response;
        setLoading(false);
        if (code === 200) {
          setWaterMark({content: values.loginname});
          setJobs(data.filter((item: unknown) => !!item) || []);
          setLogined(true);
          localStorage.setItem('jobs', JSON.stringify(data.filter((item: unknown) => !!item)));
          navigate('/uncompleted');
          return Toast.success('登陆成功');
        }
        return Toast.fail(msg);
      })
      .catch(() => {
        setLoading(false);
      })

  }


  return (
    <div>
      <Form
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{margin: '16px 16px 0'}}>
            <Button round nativeType='submit' type='primary' block onClick={() => setLoading(true)}>
              提交
            </Button>
          </div>
        }
      >
        <Form.Item
          tooltip={{
            message:
              '请输入对分易的账号哦~',
          }}
          rules={[{required: true, message: '请填写用户名'}]}
          name='loginname'
          label='用户名'
          initialValue={localStorage.getItem('loginname')}
        >
          <Input placeholder='请输入用户名'/>
        </Form.Item>
        <Form.Item
          tooltip={{
            message:
              '对分易的密码哦~',
          }}
          rules={[{required: true, message: '请填写密码'}]}
          name='password'
          label='密码'
          initialValue={localStorage.getItem('password')}
        >
          <Input placeholder='请输入密码' type="password"/>
        </Form.Item>
        <Form.Item
          name='remember'
          label=' '
          initialValue={localStorage.getItem('remember')}>
          <Radio.Group>
            <Radio shape="square" name="1">
              记住密码
            </Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
      <div style={{position: "fixed", top: '50%', left: '50%', transform: 'translate(-50%,-50%)'}}>
        {loading && <Loading type="ball"/>}
      </div>
      <PrivacyPolicy/>
    </div>
  )
}

export default Login;
